'use client'
import Banner from "../../components/banner"
import { useTranslation } from '../../i18n'
import BtPublicize from "../../components/bt-publicize"
import { Avatar, AvatarGroup, Image } from "@nextui-org/react"
import ArrowUp from '@/public/svg/arrowUp.svg'
// import { useRef } from "react"
import { useScrollToTop } from "@/utils/hooks"
function MarketContainer(){
  return (
    <div className="home-market-container">
      <div className="home-market-item">
        <Image src="https://via.placeholder.com/255x329" width={255} height={"auto"} alt="river_item" className="home-market-img"/>
        <div className="home-market-item-message">
          <div className="home-market-item-message-title">Girl</div>
          <div className="home-market-item-message-price">$15</div>
        </div>
      </div>
      <div className="home-market-item">
        <Image src="https://via.placeholder.com/255x276" width={255} height={"auto"} alt="river_item" className="home-market-img"/>
        <div className="home-market-item-message">
          <div className="home-market-item-message-title">Blue</div>
          <div className="home-market-item-message-price">$15</div>
        </div>
      </div>
      <div className="home-market-item">
        <Image src="https://via.placeholder.com/255x276" width={255} height={"auto"} alt="river_item" className="home-market-img"/>
        <div className="home-market-item-message">
          <div className="home-market-item-message-title">Phone</div>
          <div className="home-market-item-message-price">$15</div>
        </div>
      </div>
      <div className="home-market-item">
        <Image src="https://via.placeholder.com/255x329" width={255} height={"auto"} alt="river_item" className="home-market-img"/>
        <div className="home-market-item-message">
          <div className="home-market-item-message-title">Mountain</div>
          <div className="home-market-item-message-price">$15</div>
        </div>
      </div>
    </div>
  )
}

function CourseContainer({list}){
  return (
    <div className="course_container p-[23px] bg-[rgba(244,244,244,.6)] rounded-[32px] backdrop-blur-[60px]">
      {
        list.map((item, index) => {
          return (<div className="course_container_item relative mb-[15px] last:mb-[0px]" key={index}>
          <div className="course_item_header bg-[rgba(255,255,255,.4)] rounded-t-[14px] backdrop-blur-md absolute top-0 left-0 z-30 h-[31px] w-full flex items-center pl-[20px]">
            <div className="dot bg-[#F871A0]"></div>
            <div className="dot bg-[#F9C97C]"></div>
            <div className="dot bg-[#74DFA2]"></div>
          </div>
          <div className="course_item_body">
            <Image src={item.pic} width={510} height={306} style={{borderRadius: '14px'}}></Image>
          </div>
          <div className="course_item_footer absolute bottom-0 left-0 z-30 h-[61px] w-full rounded-b-[12px] bg-[rgba(255,255,255,0.1)] backdrop-blur-[27.185px] flex text-[#fff] items-center">
            <div className="course_item_footer_title flex-1 ml-[24px] text-[20px] font-normal">{item.title}</div>
            <div className="course_item_footer_right flex items-center mr-[16px]">
              <AvatarGroup isBordered size={34}>
                <Avatar/>
                <Avatar />
                <Avatar />
                <Avatar />
              </AvatarGroup>
              <div className="course_item_footer_right_text ml-[16px] text-[18px] font-normal">
                已购买
              </div>
            </div>
          </div>
        </div>)
        })
      }

    </div>
  )
}

function HardwareContainer(){
  let images = [
    '/image/hardware1.png',
    '/image/hardware1.png',
    '/image/hardware1.png',
    '/image/hardware1.png'
  ]
  return (<div className="hardware-container relative w-[517px] h-[507px] rounded-[28px] bg-[rgba(244,244,244,.6)] backdrop-blur-[60px]">
    <div className="hardware-bg-container p-[24px] flex flex-wrap">
      {
        images.map((item, index) =>{
          return (<div className="hardware-bg-item w-[222px] h-[217px] mr-[25px] mb-[24px] " key={index}>
            <Image src={item} width={222} height={217} alt="hardware-bg-item-image"/>
          </div>)
        })
      }
    </div>
    <div className="hardware-camera-container flex w-full h-full justify-center items-center absolute left-0 top-0">
      <Image src="/image/camera.png" width={163} height={231} alt="camera-image"/>
    </div>
  </div>)
}

function scrollToTop(e){
  console.log('e', e)
  useScrollToTop(e.view)
}

export default async function Home({params: { lng }}) {
  const { t } = await useTranslation(lng)
  let courseList = [
    {
      pic: '/image/course1.png',
      title: '小红书入门运营课程',
    },
    {
      pic: '/image/course2.png',
      title: '小红书入门运营课程',
    }
  ]
  const PersonMessages =[{
    type: "left",
    title: {
      text: t('Home.Person.title'),
      blueText: "个人",
    },
    desc: t('Home.Person.subTitle'),
    text: [
      t('Home.Person.first'),
      t('Home.Person.second'),
      t('Home.Person.third'),
      t('Home.Person.fourth')
    ],
    link: {
      more: 'https://app.ithinkai.cn',
      try: 'https://app.ithinkai.cn'
    },
    imageContent: <Image src="/image/Person-img.png" width={744} height={744} alt="PersonImage" className="animate__animated  animate__bounceIn"/>,
    isLink: false
  },
  {
    type: "right",
    title: {
      text: t('Home.Market.title'),
      blueText: "集市",
    },
    desc: t('Home.Market.subTitle'),
    text: [
      t('Home.Market.first'),
      t('Home.Market.second'),
      t('Home.Market.third'),
      t('Home.Market.fourth')
    ],
    link: {
      more: 'https://app.ithinkai.cn',
      try: 'https://app.ithinkai.cn'
    },
    imageContent: <MarketContainer />,
    isLink: false
  },
  {
    type: "left",
    title: {
      text: t('Home.business.title'),
      blueText: "企业",
    },
    desc: t('Home.business.subTitle'),
    text: [
      t('Home.business.first'),
      t('Home.business.second'),
      t('Home.business.third'),
      t('Home.business.fourth')
    ],
    link: {
      more: 'https://app.ithinkai.cn',
      try: 'https://app.ithinkai.cn'
    },
    imageContent: '/image/enterprise-img.png',
    option: {
      width: 628,
      height: 536
    }
  },
  {
    type: "right",
    title: {
      text: t('Home.Course.title'),
      blueText: "课程",
    },
    desc: t('Home.Course.subTitle'),
    text: [
      t('Home.Course.first'),
      t('Home.Course.second'),
      t('Home.Course.third'),
      t('Home.Course.fourth')
    ],
    link: {
      more: 'https://app.ithinkai.cn',
      try: 'https://app.ithinkai.cn'
    },
    imageContent: <CourseContainer list={courseList} />,
    isLink: false
  },
  {
    type: "left",
    title: {
      text: t('Home.hardware.title'),
      blueText: "硬件",
    },
    desc: t('Home.hardware.subTitle'),
    text: [
      t('Home.hardware.first'),
      t('Home.hardware.second'),
      t('Home.hardware.third'),
      t('Home.hardware.fourth')
    ],
    link: {
      more: 'https://app.ithinkai.cn',
      try: 'https://app.ithinkai.cn'
    },
    imageContent: <HardwareContainer />,
    isLink: false
  }]
  return (
    <div className="w-screen">
      <Banner imageUrl="/image/background.png" style={{'marginBottom': '537px'}}>
        <div className="banner-item">
          <div className="banner-title mt-[191px] flex items-center justify-center">
            <span className="default_font banner-text mr-[17px] text-[72px] mb-[33px] font-bold">一步到位，就用</span>
            <Image src="/image/iThinkAi.png" radius="null" alt="iThinkAi" width={430} height={144}></Image>
          </div>
          <div className="banner-image mt-[69px] flex justify-center items-center">
            <Image src="/image/icon.png" alt="icon" width={140} height={140}></Image>
          </div>
          <div className="video-container bg-[#000] rounded-[46px] p-[16px] w-[1360px] h-[765px] mt-[37px]">
            <div className="video-content bg-[#fff] w-full h-full rounded-[32px] overflow-hidden">
              <video className="w-full h-full" src="/video/test.mp4" controls={true} preload="metadata" poster="/video/mp4.png"></video>
            </div>
          </div>
        </div>
      </Banner>
        {
          PersonMessages.map((item,index)=>{
            return (<div className="publicize-container flex items-center justify-center w-screen mt-[116px]">
              <BtPublicize type={item.type} messages={item} key={index} imageContent={item.imageContent} isLink={item.isLink} option={item.option}></BtPublicize>
            </div>)
          })
        }
      <div className="top_container_button flex justify-center items-center mt-[119px] mb-[60px] cursor-pointer select-none" onClick={(e)=>scrollToTop(e)}>
        <ArrowUp></ArrowUp>
      </div>
    </div>
  )
}
